<template>
  <a-descriptions :column="2" bordered layout="vertical">
    <a-descriptions-item :label="$t('237')"
      >{{ currentUser.name
      }}<a-button type="link" @click="goEditName">{{
        $t("223")
      }}</a-button></a-descriptions-item
    >
    <a-descriptions-item :label="$t('238')">{{
      currentUser.registerTs
    }}</a-descriptions-item>
    <a-descriptions-item :label="$t('204')"
      ><a-button type="primary" @click="goEditPassword">{{
        $t("223")
      }}</a-button></a-descriptions-item
    >
    <a-descriptions-item :label="$t('202')"
      >{{ currentUser.phone
      }}<a-button type="link">{{ $t("223") }}</a-button></a-descriptions-item
    >
    <a-descriptions-item :label="$t('239')">
      {{ currentUser.pubKey }}
      <p>
        <a-button type="link" @click="changeKey">重新生成</a-button>
        <a-button type="link" @click="downloadPriKey">下载私钥</a-button>
      </p>
    </a-descriptions-item>
  </a-descriptions>
  <a-divider>{{ $t("240") }}</a-divider>
  <a-table :columns="cols" :data-source="lstVisitGroup" bordered size="small">
    <template #bodyCell="{ column, record }">
      <template v-if="column.dataIndex == 'status'">
        <VisitGroupViewer :vg="record.status"></VisitGroupViewer>
      </template>
      <template v-if="column.dataIndex == '_action'">
        <a-button type="link" danger @click="dropToken(record)">{{
          $t("241")
        }}</a-button>
      </template>
    </template>
  </a-table>
  <a-drawer
    v-model:open="state.popName"
    :title="$t('242')"
    size="large"
    :bodyStyle="{ padding: '4px' }"
    :headerstyle="{ padding: '4px' }"
  >
    <UserNameEditor></UserNameEditor>
  </a-drawer>
  <a-drawer
    v-model:open="state.popPassword"
    :title="$t('243')"
    size="large"
    :bodyStyle="{ padding: '4px' }"
    :headerstyle="{ padding: '4px' }"
  >
    <PasswordEditor></PasswordEditor>
  </a-drawer>
</template>
<script setup>
import { ref, onMounted, reactive } from "vue";
import CommonDefine from "@/component/CommonDefine";
import PasswordEditor from "@/profile/PasswordEditor.vue";
import UserNameEditor from "@/profile/UserNameEditor.vue";
import Utils from "@/component/Utils";
import { useI18n } from "vue-i18n";
import VisitGroupViewer from "@/component/visit/VisitGroupViewer.vue";

const { t } = useI18n();
const currentUser = ref({});
const state = reactive({ popPassword: false, popName: false });

const aboutMe = () => {
  CommonDefine.apiGetArm("/api/v1/user/about-me", (d) => {
    currentUser.value = d;
  });
};

const goEditPassword = () => {
  state.popPassword = true;
};

const goEditName = () => {
  state.popName = true;
};

const cols = [
  {
    title: t("128"),
    dataIndex: "owner",
  },
  {
    title: t("112"),
    dataIndex: "modelName",
  },
  {
    title: t("244"),
    dataIndex: "status",
  },
  {
    title: "",
    dataIndex: "_action",
  },
];

const lstVisitGroup = reactive([]);

const loadToken = () => {
  CommonDefine.clearArray(lstVisitGroup);
  CommonDefine.apiGetArm("/api/v1/share/my-token", (d) => {
    d.vgs.forEach((x) => {
      let token = {};
      token.status = x;
      let smi = d.models.find((y) => {
        return y.id == x.modelId;
      });
      token.modelName = smi.name;
      token.owner = Utils.getUserName(smi.uid);
      // console.log(token);
      lstVisitGroup.push(token);
    });
  });
};

const dropToken = (record) => {
  CommonDefine.apiPostArm(
    `/api/v1/share/drop-token/${record.modelId}`,
    null,
    (d) => {
      lstVisitGroup.forEach((item, index) => {
        if (item.modelId == record.modelId) {
          lstVisitGroup.splice(index, 1);
        }
      });
      CommonDefine.alert(t("245"));
    }
  );
};

const changeKey = () => {
  CommonDefine.apiPostArm("/api/v1/user/change-key", null, (d) => {
    CommonDefine.alert("密钥修改成功");
    aboutMe();
  });
};

const downloadPriKey = () => {
  fetch(`/api/v1/user/download-pri-key`, {
    method: "POST",
    headers: {
      Authorization: `Bearer ${localStorage.getItem("token")}`,
    },
  })
    .then((res) => res.blob())
    .then((blob) => {
      var a = document.createElement("a");
      var href = window.URL.createObjectURL(blob); //创建下载的链接
      a.href = href;
      a.download = "pri_key.pem";
      document.body.appendChild(a);
      a.click(); //点击下载
      document.body.removeChild(a); //下载完成移除元素
      window.URL.revokeObjectURL(href); //释放掉blob对象
    })
    .catch((e) => {
      CommonDefine.axiosErrorHandler(e);
    });
};

onMounted(() => {
  aboutMe();
  loadToken();
});
</script>
